<template>
  <div class="dialog" v-show="defaultValue" >
    <div class="d-content" :style="{height:height+'px'}">
      <header></header>
      <span class="vux-close" @click="defaultValue=false"></span>
      <div class="box">
        <slot/>
      </div>
      <x-button class="confirm-btn" @click.native="onConfirm">确认</x-button>

    </div>
  </div>
</template>
<script>
  import Base from './base'
  export default {
    mixins:[Base],
    props: {

      height:{
        type: Number,
        default: 300,
      }

    },
    methods:{
      onConfirm(){
        this.$emit('onConfirm')
      }
    }

  }
</script>
<style scoped>
  .dialog{
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.6);
    width: 100%;
    height: 100%;
    z-index: 501;
  }
  .d-content{
    width: 86%;
    overflow: hidden;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 22px;
    background: #FFFFFF;

  }
  .box{
    padding:0 4.5%
  }
  header {
    background:  url(../assets/images/dialog-line.png) 0 0 repeat-x;
    background-size:1px auto;
    height: 35px;
  }

  .confirm-btn{
    font-size: 16px;
    line-height: 35px;
    width: 40%;
  position: absolute;
  -webkit-transform: translate(-50%,0);
  transform: translate(-50%,0);
  left: 50%;
  bottom:30px;
  }
  .vux-close {
    position: absolute;
    right: 9px;
    top: 6px;
    color:#fff
  }
  .vux-close:before, .vux-close:after{
    width: 18px;
  }
</style>
